<template>
  <div class="goodsItem">
    <div class="left">
      <slot name="content"></slot>
    </div>
    <div class="right" v-if="takeOut">
      <div class="btn" style="height: 100%; line-height: 110px" @click="operateFn">输入</div>
    </div>
    <div class="right" v-else>
      <div class="btn" @click="inputFn">输入</div>
      <div class="btn" @click="operateFn">操作</div>
    </div>
    <el-dialog v-model="alertDio" title="提示" width="20%" @closed="resetFn">
      <div style="font-size: 20px">您确定要进行打印吗？</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="large" @click="alertDio = false">取消</el-button>
          <el-button size="large" type="primary" v-print="printObj" @click="printComfire"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <PrintPage :printId="goodsInfo.FBillNo" :list="printInfo" />
  </div>

  <el-dialog v-model="inputVisible" width="500" align-center>
    <div class="diaBox">
      <div class="first">当前已称重数：{{ goodsInfo?.F_TEZV_JHSL }}</div>
      <div class="sub">请选择要进行的操作</div>
      <el-space wrap size="large">
        <el-Button class="btn" type="primary" size="large">加入已称重数</el-Button>
        <el-Button
          class="btn"
          type="primary"
          size="large"
          :loading="cancelLoading"
          @click="cancelWeightFn"
          >取消已称重数</el-Button
        >
      </el-space>
    </div>
  </el-dialog>
  <el-dialog v-model="numVisible" width="500" align-center>
    <div class="numBox">
      <el-Input
        size="large"
        style="font-size: 20px"
        v-model="numInput"
        placeholder="请手动输入称重数，最大重量100000"
      ></el-Input>
      <div class="caluBox">
        <el-Button class="item num" @click="pushNum(1)">1</el-Button>
        <el-Button class="item num" @click="pushNum(2)">2</el-Button>
        <el-Button class="item num" @click="pushNum(3)">3</el-Button>
        <el-Button class="item text" @click="back">后退</el-Button>
        <el-Button class="item num" @click="pushNum(4)">4</el-Button>
        <el-Button class="item num" @click="pushNum(5)">5</el-Button>
        <el-Button class="item num" @click="pushNum(6)">6</el-Button>
        <el-Button class="item num" @click="pushNum('.')">.</el-Button>
        <el-Button class="item num" @click="pushNum(7)">7</el-Button>
        <el-Button class="item num" @click="pushNum(8)">8</el-Button>
        <el-Button class="item num" @click="pushNum(9)">9</el-Button>
        <el-Button class="item text" @click="numInput = ''">清空</el-Button>
        <el-Button class="item text" @click="numVisible = false">取消</el-Button>
        <el-Button class="item num" @click="pushNum(0)">0</el-Button>
        <el-Button class="item text" @click="addWeightFn(true)">加入已称重数</el-Button>
        <el-Button type="primary" class="item text" style="color: #fff" @click="addWeightFn(false)"
          >替换已称重数</el-Button
        >
      </div>
    </div>
  </el-dialog>
</template>

<script lang="ts" setup>
import PrintPage from '@/components/printPage.vue'
import { save } from '@/api/home'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
const { takeOut, goodsInfo, reset } = defineProps<{
  takeOut?: boolean
  goodsInfo: GoodsTypes.goodsOrderInfo
  reset: (item: string) => void
}>()
const inputVisible = ref(false)
const numVisible = ref(false)
const cancelLoading = ref(false)
const numInput = ref('')
const alertDio = ref(false)
const printInfo = ref<any>([])
const inputFn = () => {
  if (goodsInfo?.FChangeType === '删除') {
    return ElMessage({
      message: '该商品已删除，无法修改',
      type: 'warning'
    })
  }
  numVisible.value = true
}
const printObj = {
  id: goodsInfo.FBillNo,
  popTitle: 'good print',
  closeCallback() {
    alertDio.value = false
  }
}
const operateFn = () => {
  console.log(goodsInfo)
  if (goodsInfo?.FChangeType === '删除') {
    return ElMessage({
      message: '该商品已删除，无法修改',
      type: 'warning'
    })
  }
  inputVisible.value = true
}
const pushNum = (index: number | string) => {
  let str = numInput.value
  str += index
  if (str.split('.').length - 1 >= 2) {
    ElMessage({
      message: '非法数值',
      type: 'warning'
    })
    return
  }
  numInput.value = str
}
const back = () => {
  if (numInput.value.length === 1) {
    numInput.value = ''
  } else {
    numInput.value = numInput.value.slice(0, -1)
  }
}
const addWeightFn = async (isAdd: boolean) => {
  if (+numInput.value <= 0) {
    return ElMessage({
      message: '数量不能为空',
      type: 'warning'
    })
  }
  const num = isAdd ? +numInput.value + +(goodsInfo?.F_TEZV_JHSL as string) : numInput.value

  await save({
    FormId: 'SAL_SaleOrder',
    Data: {
      FormId: 'SAL_SaleOrder',
      Model: {
        FID: goodsInfo?.FID,
        FBilINo: goodsInfo?.FBillNo,
        FSaleOrderEntry: [
          {
            F_TEZV_JHSL: +num,
            FEntryID: goodsInfo?.FEntryID,
            FStockUnitID: {
              FNumber: goodsInfo?.FStockUnitID
            },
            FPriceUnitId: {
              FNumber: goodsInfo?.FPriceUnitId
            },
            FMaterialId: {
              FNumber: goodsInfo?.FMaterialIdNum
            }
          }
        ]
      }
    }
  })
  alertDio.value = true
}
const cancelWeightFn = async () => {
  cancelLoading.value = true
  await save({
    FormId: 'SAL_SaleOrder',
    Data: {
      FormId: 'SAL_SaleOrder',
      Model: {
        FID: goodsInfo?.FID,
        FBilINo: goodsInfo?.FBillNo,
        FSaleOrderEntry: [
          {
            F_TEZV_JHSL: 0,
            FEntryID: goodsInfo?.FEntryID,
            FStockUnitID: {
              FNumber: goodsInfo?.FStockUnitID
            },
            FPriceUnitId: {
              FNumber: goodsInfo?.FPriceUnitId
            },
            FMaterialId: {
              FNumber: goodsInfo?.FMaterialIdNum
            }
          }
        ]
      }
    }
  })
  if (goodsInfo?.FNumber) {
    reset(goodsInfo?.FNumber as string)
  } else {
    reset(goodsInfo?.FChangeType as string)
  }
  ElMessage({
    message: '取消成功',
    type: 'success'
  })
  cancelLoading.value = false
  inputVisible.value = false
}
const resetFn = () => {
  if (goodsInfo?.FNumber) {
    reset(goodsInfo?.FNumber as string)
  } else {
    reset(goodsInfo?.FChangeType as string)
  }
  ElMessage({
    message: '修改成功',
    type: 'success'
  })
  numVisible.value = false
  numInput.value = ''
}
const printComfire = () => {
  const obj = { ...goodsInfo }
  obj.F_TEZV_JHSL = numInput.value
  console.log(obj, 'obj')
  printInfo.value = [obj]
}
</script>

<style scoped lang="less">
.goodsItem {
  display: flex;
  .left {
    width: 300px;
    border-radius: 8px 0px 0px 8px;
    border: 1px solid #ebebeb;
  }
  .right {
    .btn {
      border-radius: 0px 8px 0px 0px;
      border: 1px solid #ebebeb;
      padding: 33px 40px;
      font-size: 18px;
      color: #8083a3;
      line-height: 25px;
      cursor: pointer;
    }
  }
}
.diaBox {
  width: 100%;
  text-align: center;
  .first {
    font-size: 24px;
    font-weight: 500;
    color: #000000;
    line-height: 43px;
  }
  .sub {
    font-size: 18px;
    color: #8994b6;
    line-height: 45px;
  }
  .btn {
    width: 213px;
  }
}
.caluBox {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px; /* 子元素之间的间距 */
  width: 100%;
  text-align: center;
  margin-top: 12px;
  .item {
    width: 108px;
    height: 108px;
    border-radius: 8px;
    border: 1px solid #e0e3eb;
    margin: 0;
    font-family: DINPro, DINPro;
    font-weight: bold;
    color: #333333;
    white-space: wrap;
  }
  .num {
    font-size: 48px;
    font-weight: bold;
  }
  .text {
    font-size: 24px;
    line-height: 30px;
  }
}
</style>
